{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<form data-abide novalidate id="{{formPanelId}}Wizard" class="custom creation">
  <div class="row">
    <div class="service_template_param st_man medium-6 columns">
      <label for="service_name">
        {{tr "Name"}}
      </label>
      <input type="text" id="service_name" name="service_name" required/>
    </div>
    <div class="service_template_param st_man medium-6 columns">
    </div>
  </div>
  <div class="row">
    <div class="service_template_param st_man large-12 columns">
      <label  for="description">
        {{tr "Description"}}
      </label>
      <textarea type="text" id="description" name="description"/>
    </div>
  </div>
  <br>
  <div id="network_configuration">
    {{#advancedSection (tr "Network configuration") }}
    <div class="row">
      <div class="large-12 columns">
        <table class="service_networks policies_table dataTable">
          <thead>
            <tr>
              <th style="width:30%">{{tr "Name"}}</th>
              <th style="width:70%">{{tr "Description"}}</th>
              <th style="width:3%"></th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3">
                <a type="button" class="add_service_network button small small-12 secondary radius"><i class="fa fa-lg fa-plus-circle"></i> {{tr "Network"}}</a>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    {{/advancedSection}}
  </div>
  <br>
  {{#advancedSection (tr "Advanced service parameters") }}
  <div class="row">
    <div class="service_template_param st_man medium-6 columns">
      <label for="deployment">
        {{tr "Strategy"}}
        <span class="tip">{{tr "Straight strategy will instantiate each role in order: parents role will be deployed before their children. None strategy will instantiate the roles regardless of their relationships."}}</span>
      </label>
      <select name="deployment">
        <option value="straight">{{tr "Straight"}}</option>
        <option value="none">{{tr "None"}}</option>
      </select>
    </div>
    <div class="service_template_param st_man medium-6 columns">
      <label for="shutdown_action_service">
        {{tr "VM shutdown action"}}
      </label>
      <select name="shutdown_action_service">
        <option value=""></option>
        <option value="terminate">{{tr "Terminate"}}</option>
        <option value="terminate-hard">{{tr "Terminate hard"}}</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="service_template_param st_man small-12 columns">
      <input type="checkbox" name="ready_status_gate" id="ready_status_gate"/>
      <label for="ready_status_gate">
        {{tr "Wait for VMs to report that they are READY via OneGate to consider them running"}}
      </label>
    </div>
  </div>
  {{/advancedSection}}
  <br>
  <div class="row">
    <div class="large-12 columns">
      <h5>
        {{tr "Roles"}}
        <a class="button small radius" id="tf_btn_roles" style="vertical-align: text-top; margin-left: 1em;">
          <i class="fa fa-lg fa-plus-circle"></i>
        </a>
      </h5>
    </div>
  </div>
  <br>
  <div class="row">
    <div id="new_role" class="large-12 columns">
      <ul class="tabs" id="roles_tabs" data-tabs>
      </ul>
      <div class="tabs-content" id="roles_tabs_content" data-tabs-content="roles_tabs">
      </div>
    </div>
  </div>
</form>
